<template>
	<ContainerExt title="数据管理">
    <div class="main_c">
      <div class="headinfo_c">
        <div class="searchinput_c">
          <div class="searchname_c">
            <span>
              姓名：
            </span>
            <el-input
              placeholder="请输入姓名"
              prefix-icon="el-icon-search"
              v-model="searchname"
              style="width: 150px;"
              clearable>
            </el-input>
          </div>

          <div class="searchdate_c">
            <span>
            检查时间：
            </span>
            <el-date-picker   v-selfdbclick
              v-model="searchdate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>

        </div>
        <div class="searchbotton_c">
            <el-button type="primary"  @click="handleSearch">查询</el-button>
        </div>
      </div>
      <div class="databoard_c">
            <el-table
                :data="tableData"
                v-loading="listLoading"
                highlight-current-row
                border
                style="width: 100%" height="100%"
                @row-click="handleRowClick"
                :header-cell-style="{background:'#f5f7fa'}">
                <el-table-column
                  prop="cid"
                  label="ID"

                  align="center">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="姓名"

                  align="center">
                </el-table-column>

                <el-table-column
                  prop="birthday"
                  label="生日"
                  align="center">
                </el-table-column>

                <el-table-column
                  prop="sex"
                  label="性别"

                  align="center">
                </el-table-column>

                <el-table-column
                  prop="zs"
                  label="检测值"

                  align="center">
                </el-table-column>

                <el-table-column
                  prop="checktime"
                  label="检查时间"

                  align="center">
                </el-table-column>

                <template slot="empty">
                    <el-empty :image-size="100" description="空空的"></el-empty>
                </template>
            </el-table>
      </div>

      <div class="tail_c">
          <div  class="tail2_c">
            <div>
              <el-button type="primary" style="width:113px;height: 55px;font-size: 18px;" @click="handlehistory">历史检查</el-button>
            </div>
            <div>
              <el-button type="primary" style="width:113px;height: 55px;font-size: 18px;" @click="handlegoon">继续检查</el-button>
            </div>
            <div>
              <el-button type="primary" style="width:113px;height: 55px;font-size: 18px;" @click="handleback">回首页</el-button>
            </div>
          </div>
      </div>
    </div>
	</ContainerExt>

</template>

<!-- <script>
	import {
		qtCall,
		qtHandle
	} from '../main.js'

  import {varShared} from '../shared/varShared.js'

	import Container from '@/components/Container'
	import ContainerExt from '@/components/ContainerExt'

	export default {
		name: 'BoneDen',
		components: {
			Container,
			ContainerExt
		},
		data() {
			return {
        listLoading:false,
        searchname:'',
        searchdate:'',
        curRow:null,
        tableData: [
				  {
            cid:'CK202212052235',
            name:'李刚',
            birthday:'1990-05-21',
            sex:'男',
            zs: '-1.6',
				    checktime: '2021-05-02 12:20',
            height:'170',
            weight:'60'

				  },
          {
            cid:'CK202012052235',
            name:'刘贝贝',
            birthday:'1989-11-21',
            sex:'女',
            zs: '-1.5',
            checktime: '2017-10-02 12:20',
            height:'164',
            weight:'56'
          },
          {
            cid:'CK202010052235',
            name:'黄娟',
            birthday:'1986-12-21',
            sex:'女',
            zs: '-1.2',
            checktime: '2020-10-02 12:20',
            height:'162',
            weight:'55'
          },
          {
            cid:'CK202010042235',
            name:'王强',
            birthday:'1985-11-21',
            sex:'男',
            zs: '-1.4',
            checktime: '2020-10-02 12:20',
            height:'174',
            weight:'66'
          },
        ],
			}
		},
    created() {
      // getCheckListRsp
      qtHandle["getCheckListRsp"] = this.getCheckListRsp;
      if (qtCall != null) {
        this.listLoading = true;
        let qtarg = {
          name:'',
          starttime:'',
          endtime:''
        }
        qtCall("getCheckList", JSON.stringify(qtarg));
      }
    },
		// mounted() {
		// 	qtHandle["apptest"] = this.apptest;
		// },
		methods: {
      getCheckListRsp(rsp) {
        console.log("getCheckListRsp: " + rsp);
        let rspobj = JSON.parse(rsp);
        let new_item = rspobj.data[rspobj.data.length - 1];
        this.tableData.push(new_item);
        this.listLoading = false;
      },
      handleback() {
        this.$router.push('/');
      },
      handleSearch() {
        if (qtCall != null)
        {
          this.listLoading = true;
          let qtarg = {
            name:this.searchname,
            starttime:'',
            endtime:''
          }
          try {
            if (this.searchdate.length > 0) {
              qtarg.starttime = (new Date(this.searchdate[0])).getTime();
              qtarg.endtime = (new Date(this.searchdate[1])).getTime() + 1000*60*60*24;
            }
          } catch(err) {
            // qtarg.starttime = '';
            // qtarg.endtime = '';
          }
          // console.log("search argsssssssssssss"+ JSON.stringify(qtarg));
          qtCall("getCheckList", JSON.stringify(qtarg));
        }
      },
      handleRowClick(row, column, event) {
        this.curRow = row;
      },
      setCurCheck() {
        varShared.checkInfo = {};
        varShared.checkInfo.cid = this.curRow.cid;
        varShared.checkInfo.name = this.curRow.name;
        varShared.checkInfo.sex = this.curRow.sex=='男'?'1':'0';
        varShared.checkInfo.birthday = (new Date(this.curRow.birthday)).getTime();
        varShared.checkInfo.age = (((new Date()).getTime() - (new Date(this.curRow.birthday)).getTime())/(1000*60*60*24*365)).toFixed(0);
        varShared.checkInfo.checktime = (new Date(this.curRow.checktime)).getTime();
        varShared.checkInfo.height = this.curRow.height;
        varShared.checkInfo.weight = this.curRow.weight;
      },
      handlegoon() {
        if (this.curRow == null) {
            this.$alert('请选择一条记录', '提示', {
              confirmButtonText: '确定',
              // cancelButtonText: '取消',
              type: 'error',
              // center: true
            })
            return ;
        } else {
          this.setCurCheck();
          // this.$router.push('/check');
        }
      },
      handlehistory() {
        if (this.curRow == null) {
            this.$alert('请选择一条记录', '提示', {
              confirmButtonText: '确定',
              // cancelButtonText: '取消',
              type: 'error',
              // center: true
            })
            return ;
        } else {
          this.setCurCheck();
          // this.$router.push('/history');
        }
      }
		}
	}
</script> -->

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .main_c {
    width: 100%;
    height: 100%;
    color: #c5c9d0;
    font-size: 18px;

  }

  .headinfo_c {
    width: calc(100% - 20px - 20px);
    height: 15%;
    /* padding-top: 10px; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20px;
    padding-right: 20px;
  }

  .databoard_c{
    display: flex;
    justify-content: space-between;
    /* width: 100%; */
    height: calc(100% - 15% - 15%);
    /* padding-left: 40px;
    padding-right: 40px; */
  }

  .tail_c {
    /* width: 100%; */
    height: 15%;
    display: flex;

    align-items: center;
    /* padding-left: 10px;
    padding-right: 10px; */
    /* padding-left: 40px;
    padding-right: 40px; */
  }

  .tail2_c {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .searchinput_c {
    display: flex;
  }

  .searchname_c {
    display: flex;
    align-items: center;
    /* width: 300px; */
    margin-right: 20px;
  }

  .searchdate_c {
    display: flex;
    align-items: center;
  }

  /* .searchname_c span {
    width: 70px;
  } */


</style>
